import React, { memo ,shallowequal} from 'react'
import {useSelector ,useDispatch} from 'react-redux'
import {HNBarHeaderWrap,BarHeaderContent} from './style'
import {clearPlayListAction,changeIsShowPannel} from '../../../store/actionCreators'
export default memo(function HNBarHeader() {

  const {currentSong,playList} = useSelector(state => ({
    currentSong : state.getIn(["player", "currentSong"]),
    playList : state.getIn(["player", "playList"]),
  }),shallowequal)
  const dispatch = useDispatch();

  const clear = ()=>{
    console.log(1);
    dispatch(clearPlayListAction());
  }

  const handle = () =>{
    dispatch(changeIsShowPannel(false));
  }

  return (
    <HNBarHeaderWrap className="header-bg">
      <BarHeaderContent>
        <div className="left">播放列表({playList.length})</div>
        <div className="center">
          <i className="love sprite_playlist"></i>
          <span>收藏全部</span>
          <span className="clear1"onClick={e=>clear()}>
            <i className="clear sprite_playlist"></i>
           <span>清除</span>
          </span>
        </div>
        <div className="right">{currentSong.name}</div>
        <span className="close sprite_playlist" onClick={e=>handle()}></span>
      </BarHeaderContent>
    </HNBarHeaderWrap>
  )
})
